<template>
	<div class="content actSettings">
		<div class="searchBox">
			<div class="searchContent">
				<div class="searchTop">
					<span class="searchText">活动主题:</span>
					<input type="text" class="searchInput" placeholder="请输入活动主题" max="15" v-model.trim="activityTheme">
					<span class="searchText">活动场景:</span>
					<select class="searchInput" v-model="activityScenes">
						<option value="">全部</option>
						<option value="994001">注册</option>
						<option value="994002">充值</option>
						<option value="994003">充电</option>
						<!-- <option value="994003">充电(消费金额)</option> -->
						<!-- <option value="994003">充电(已充电量)</option> -->
						<option value="994004">页面活动</option>
					</select>
					<span class="searchText">活动状态:</span>
					<select class="searchInput" v-model="activityStatus">
						<option value="">全部</option>
						<option value="990014">上架</option>
						<option value="990013">下架</option>
						<option value="990020">作废</option>
					</select>
					<span class="searchText">审核状态:</span>
					<select class="searchInput" v-model="activityVerifyStatus">
						<option value="">全部</option>
						<option value="981001">新建</option>
						<option value="981002">待复录</option>
						<option value="981003">复录失败</option>
						<option value="981004">待审核</option>
						<option value="981005">审核失败</option>
						<option value="981006">审核通过</option>
					</select>
					<div class="openBtn" @click="openBottom" v-show="showOpenBtn"></div>
					<div class="closeBtn" @click="closeBottom" v-show="showCloseBtn"></div>
				</div>
				<div v-show="showSearchBottom" style="margin-top: .08rem;">
					<span class="searchText">开始时间区间:</span>
					<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="startTime" type="datetimerange" :picker-options="pickerOptions" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
					</el-date-picker>
				</div>
			</div>
			<div class="searchBut" @click="getData"><img src="../../assets/search.png" class="foundPic"/>搜索</div>
		</div>
		<div class="tableBox">
			<div class="playBox">
				<div class="butInfoMes add" @click="goAdd">添加</div>
				<div class="butInfoMes edit" @click="goEdit">修改</div>
				<div class="butInfoMes edit detailBtn" @click="goDetail(0)">初录详情</div>
				<div class="butInfoMes edit detailBtn detailBtn1" @click="goDetail(1)">复录详情</div>
			</div>
			<div class="contentTable">
				<div v-if="searchType == 1">
					<img src="~_assets/fail.png" class="searchResult">
				</div>
				<div v-else-if="searchType == 2">
					<img src="~_assets/nosearch.png" class="searchResult">
				</div>
				<bootstrap-table :my_columns="my_columns" :my_data="data1" :my_options="my_options" @item='getCurrentItem' v-else ref="table1"></bootstrap-table>
				<!-- <vue-bootstrap4-table :rows="data1" :columns="my_columns" :config="my_options"></vue-bootstrap4-table> -->
			</div>
		</div>
		<alert-dialog v-if="showDialog" @closeAlarm="closeAlarm" :type="dialogType" :selectItem="currentItem"></alert-dialog>
	</div>
</template>

<script>
	import switch_off from '../../assets/switch_off.png'
	import switch_on from '../../assets/switch_on.png'
	import AlertDialog from './children/AlertDialog.vue'
	import Bus from '@/bus.js';
	import {
		FIND_ACTIVITY_LIST,
		SAVE_OR_EDIT_SETTING,
		} from '@/config/url'

	import { time } from '_config/common.js'
	export default {
		components: {
			AlertDialog
		},
		mounted(){
			this.getData()
			$('.contentTable').on('click','.switchActList',this.switchList)
			$('.contentTable').on('click','.switchIndex',this.switchIndex)
			$('.contentTable').on('click','.sleItem',this.showData)
			$('.contentTable').on('click','.sleItemer',()=>{//二维码
				this.showDialogType(4)
			})
			$('.contentTable').on('click','.downItem',(e)=>{//下架
				if(e.target.innerHTML == '上架'){
					this.showDialogType(0)
				}else if(e.target.innerHTML == '下架'){
					this.showDialogType(1)
				}
			})
		},
		data() {
			return {
				type:null,//弹窗类型
				showDialog:false,//显示提示
				searchType:12,//查询结果类型 1查询失败2无结果
				pickerOptions: time,
				startTime: '',
				showCloseBtn: false,
				showOpenBtn: true,
				canModify:false,//可以点击修改
				canEnter: false,// 可以点击初录
				canRepeat: false,// 可以点击复录
				my_columns: [{
						title: '序号',
						field: '',
						formatter: function(value, row, index) {
							return index + 1;
						}
					},
					{
						title: '活动主题',
						field: 'activityTheme',
						formatter: function(value, row, index) {
							if(value.length > 8){
								value = value.substr(0,8)+'...'
							}
							return value;
						}
					},
					{
						title: '活动类型',
						field: 'receiveType',
						formatter: function(value, row, index) {
							let val = ''
							if(value == '993025'){
								val = '领取奖项'
							}else if(value == '993024'){
								val = '抽取奖项'
							}else if(value == '993023'){
								val = '折扣优惠'
							}else if(value == '993022'){
								val = '返现'
							}
							return val;
						}
					},
					{
						title: '活动场景',
						field: 'activityScenes',
						formatter: function(value, row, index) {
							let val = ''
							if(value == '994001'){
								val = '注册'
							}else if(value == '994002'){
								val = '充值'
							}else if(value == '994003'){
								val = '充电'
							}else if(value == '994004'){
								val = '页面活动'
							}
							return val;
						}
					},
					{
						title: '所属系统',
						field: 'activityAttribution',
						formatter: function(value, row, index) {
							let val = ''
							if(value == '181010'){
								val = '充电系统'
							}else if(value == '181020'){
								val = '停车系统'
							}
							return val;;
						}
					},
					{
						title: '活动列表显示',
						field: 'activityShow',
						formatter: function(value, row, index){
							let btn = ''
							if(value){
								if(row.activityImg == ''){
									btn = `<img src="${switch_on}" class="notSwitch" data-on=${value} />`
								}else{
									btn = `<img src="${switch_on}" class="switchActList" data-on=${value} />`
								}
							}else{
								if(row.activityImg == ''){
									btn = `<img src="${switch_off}" class="notSwitch"  data-on=${value} />`
								}else{
									btn = `<img src="${switch_off}" class="switchActList"  data-on=${value} />`
								}
							}
							return btn;
						}
					},
					{
						title: '首页显示',
						field: 'homeShow',
						formatter: function(value, row, index){
							let btn = ''
							if(value){
								if(row.homeImg == ''){
									btn = `<img src="${switch_on}" class="notSwitch" data-on=${value} />`
								}else{
									btn = `<img src="${switch_on}" class="switchIndex" data-on=${value} />`
								}
							}else{
								if(row.homeImg == ''){
									btn = `<img src="${switch_off}" class="notSwitch" data-on=${value} />`
								}else{
									btn = `<img src="${switch_off}" class="switchIndex" data-on=${value} />`
								}
							}
							return btn;
						}
					},
					{
						title: '活动状态',
						field: 'activityStatus',
						formatter: function(value, row, index){
							let val = ''
							if(value == '990013'){
								val = `<span class="downItem">下架</span>`
							}else if(value == '990014'){
								val = val = `<span class="downItem upItem">上架</span>`
							}else if(value == '990020'){
								val = '作废'
							}
							return val;
						}
					},
					{
						title: '开始时间',
						field: 'startTime',
						sortable: true
					},
					{
						title: '结束时间',
						field: 'endTime',
						sortable: true
					},
					{
						title: '审核状态',
						field: 'activityVerifyStatus',
						formatter: function(value, row, index){
							let val = ''
							if(value == '981005'){
								val = `<span style="color:#EC0021">审核失败</span>`
							}else if(value == '981001'){
								val = '新建'
							}else if(value == '981002'){
								val = `<span style="color:#3395FF">待复录</span>`
							}else if(value == '981003'){
								val = `<span style="color:#C902ED">复录失败</span>`
							}else if(value == '981004'){
								val = `<span style="color:#FF7400">待审核</span>`
							}else if(value == '981006'){
								val = `<span style="color:#00B62A">审核成功</span>`
							}
							return val;
						}
					},
					{
						title: '操作',
						field: '',
						formatter: function(value, row, index){
							value = row.activityVerifyStatus == '981006'?3:2
							if(value == 1){
								return `<span class="sleItemer">活动二维码</span>`
							}else if(value == 2){
								return `<span class="sleItem">活动统计</span>`
							}else if(value == 3){
								return `<div class="operBox"><span class="sleItemer">活动二维码</span><span class="sleItem">活动统计</span></div>`
							}
						}
					},
				],
				my_options:{},
				data1: [],
				config: {
					checkbox_rows: true,
					rows_selectable: true,
					card_title: "Vue Bootsrap 4 advanced table"
				},
				currentItem:null,//选择的当前行
				activityCode:null,//活动code
				activityTheme:null,//主题
				activityStatus:'',//状态
				activityVerifyStatus:'',//审核状态
				startTime:null,//开始时间
				endTime:null,//结束时间
				activityScenes:'',//场景
				page:1,
				size:10,
				operator:null,//操作人,
				showSearchBottom:false,
			}
		},
		methods: {
			openBottom() {
				this.showSearchBottom = true;
				this.showCloseBtn = true;
				this.showOpenBtn = false;
			},
			closeBottom() {
				this.showSearchBottom = false;
				this.showCloseBtn = false;
				this.showOpenBtn = true;
			},
			getParams(){
				sessionStorage.removeItem('activityCode')
				this.canModify = false
				$('.edit').css({
					'border': '0.005208rem solid #ddd',
					'color':'#ddd'
				})
				this.canRepeat = false
				this.canEnter = false
				$('.detailBtn').css({
					'border': '0.005208rem solid #ddd',
					'color':'#ddd'
				})
				let param = {
					activityTheme : this.activityTheme,
					activityStatus : this.activityStatus,
					activityVerifyStatus : this.activityVerifyStatus,
					activityStatus : this.activityStatus,
					startTime : this.startTime && this.startTime[0],
					endTime : this.startTime && this.startTime[1],
					activityScenes:this.activityScenes,
					page:this.$refs.table1.local.options.pageNumber,
					size:this.$refs.table1.local.options.pageSize
				}
				return param
			},
			goDetail(type){
				if(!this.activityCode){
					this.$message({
						message: '请选择一条数据',
						type: 'warning'
					});
				}else{
					if(type == 0){
						if(this.canEnter){
							sessionStorage.setItem('repeatRecord',0);
							sessionStorage.setItem('detail',1)
							this.$router.push('/settingIndex/activityDone')
						}
					}else{
						if(this.canRepeat){
							sessionStorage.setItem('repeatRecord',1)
							sessionStorage.setItem('detail',1)
							this.$router.push('/settingIndex/activityDone')
						}
					}
					
				}
			},
			getCurrentItem(data){
				if(data && data.activityCode){
					$('.detailBtn').removeClass('edit')
					$('.detailBtn').addClass('detail')
					this.currentItem = data
					this.activityCode = data.activityCode
					sessionStorage.setItem('activityCode',data.activityCode)
					$('.detail').css({
						'border': '0.005208rem solid #3395FF',
						'color':'#3395FF'
					})
					$('.delete').css({
						'border': '0.005208rem solid #3395FF',
						'color':'#3395FF'
					})
					this.canEnter = true
					if(data.activityVerifyStatus == '981001' || data.activityVerifyStatus == '981002'){//新建,待复录不可点击复录详情
						this.canRepeat = false
						$('.detailBtn1').css({
							'border': '0.005208rem solid #ddd',
							'color':'#ddd'
						})
					}else{
						this.canRepeat = true
						$('.detailBtn1').css({
							'border': '0.005208rem solid #3395FF',
							'color':'#3395FF'
						})
					}
				}
			},
			showDialogType(type){
				this.dialogType = type
				this.showDialog = true
			},
			showData(){
				Bus.$emit('addTab','活动统计')
			},
			closeAlarm(type){
				if(type == 1){
					this.getData()
				}
				this.showDialog = false
			},
			goAdd() {
				sessionStorage.removeItem('activityCode')
				sessionStorage.setItem('repeatRecord',0)
				sessionStorage.setItem('detail',0)
				this.$router.push('/settingIndex/newActivities')
			},
			goEdit(){
				if(!this.activityCode){
					this.$message({
						message: '请选择一条数据',
						type: 'warning'
					});
				}else{
					if(this.canModify){
						sessionStorage.setItem('detail',0)
						sessionStorage.setItem('repeatRecord',0)
						this.$router.push('/settingIndex/newActivities')
					}
				}
			},
			switchIndex(e){
				// e.stopPropagation();
				let tag = $(e.target).attr('data-on')
				if(tag == '1' || tag == 'true'){
					this.changeDisplay(1,0)
					$(e.target).attr({
						'src':switch_off,
						'data-on':'false'
					})
				}else{
					this.changeDisplay(1,1)
					$(e.target).attr({
						'src':switch_on,
						'data-on':'true'
					})
				}
			},
			switchList(e){
				// e.stopPropagation();
				let tag = $(e.target).attr('data-on')
				if(tag == '1' || tag == 'true'){
					this.changeDisplay(2,0)
					$(e.target).attr({
						'src':switch_off,
						'data-on':'false'
					})
				}else{
					this.changeDisplay(2,1)
					$(e.target).attr({
						'src':switch_on,
						'data-on':'true'
					})
				}
			},
			getData(){
				this.my_options = {
					pagination: true,
					sidePagination:'server',
					url:FIND_ACTIVITY_LIST,
					queryParams:this.getParams
				}
				// this.$refs.table1.refresh()
				// this.data1 = []
				// this.$fetch(FIND_ACTIVITY_LIST,
				// 	{
				// 		activityTheme:this.activityTheme,
				// 		activityStatus:this.activityStatus,
				// 		activityVerifyStatus:this.activityVerifyStatus,
				// 		startTime:this.startTime,
				// 		endTime:this.endTime,
				// 		activityScenes:this.activityScenes,
				// 		page:this.page,
				// 		size:this.size
				// 	},
				// )
				// .then(res=>{
				// 	if(res.status == 1){
				// 		this.data1 = []
				// 		this.data1 = res.rows
				// 		this.my_options.totalRows = res.total
				// 	}
				// })
				// .catch(err=>{
				// 	console.log(err)
				// 	this.$message({
				// 		message: '保存失败',
				// 		type: 'warning'
				// 	});
				// })
			},
			changeDisplay(type,status){//修改1首页or2列表展示
				let param = {
					activityCode:sessionStorage.getItem('activityCode'),
					operator:this.operator,
				}
				if(type == 1){
					param.homeShow = status
				}else if(type == 2){
					param.activityShow = status
				}

				this.$post(SAVE_OR_EDIT_SETTING,param)
					.then(res=>{
						let data = res.data
						if(res.status == 1){
							// this.$message({
							// 	message: '提交成功',
							// 	type: 'success'
							// });
							// this.getData()
						}else{
							this.$message({
								message: res.data,
								type: 'warning'
							});
						}
					})
					.catch(err=>{
						console.log(err)
						this.$message({
							message: '操作失败',
							type: 'warning'
						});
					})
			}
		},
		watch:{
			'$route'(to, from) {
				if(to.path == '/settingIndex/actSettings'){
					this.getData
				}
			},
			currentItem(val){//新建，可以点修改
				let status = val.activityVerifyStatus
				if(status == '981001'){
					this.canModify = true
					$('.edit').css({
						'border': '0.005208rem solid #3395FF',
						'color':'#3395FF'
					})
				}else{
					this.canModify = false
					$('.edit').css({
						'border': '0.005208rem solid #ddd',
						'color':'#ddd'
					})
				}
				
			}
		},
	}
</script>

<style lang="less">
	@import '~_config/mixin.less';
	.actSettings {
		.searchTop {
			display: flex;
			align-items: center;
		}
		.searchBut{
			position: absolute;
			top: .1rem;
			right: 1.7rem;
		}
		.openBtn {
			position: absolute;
			right: 0.1rem;
			width: 0.2rem;
			height: 0.15rem;
			background: url(../../assets/more.png) no-repeat;
		}

		.openBtn:hover {
			width: 0.25rem;
			height: 0.42rem;
			background: url(../../assets/hover.png) no-repeat;
			background-size: 100% 100%;
		}

		.closeBtn {
			position: absolute;
			top: 0;
			right: 0.1rem;
			width: 0.25rem;
			height: 0.66rem;
			background: url(../../assets/less.png) no-repeat;
			background-size: 100% 100%;
		}
		.searchInput{
			margin-right: 20px;
			width: .98rem;
		}
		.el-input__inner {
			height: 0.18rem;
			border-radius: 8px;
			padding-left: 0.08rem;
			background: rgba(255, 255, 255, 1);
			border: 1px solid rgba(181, 194, 202, 1);
			margin-right: 0.2rem;
			margin-left: 0.04rem;
		}
		.contentTable {
			width: 99%;
			margin: 0 auto;
		}
		.bootstrap-table {
			padding-top: 0;
		}
		.switchActList,
		.switchIndex{
			cursor: pointer;
		}
		.notSwitch{
			cursor: not-allowed;
		}
		.downItem,.upItem,.sleItem,.sleItemer{
			cursor: pointer;
			text-decoration:underline;
		}
		.sleItem:hover{
			color:#3395FF
		}
		.downItem{
			color:#FF2E2E;
		}
		.upItem{
			color:#00B62A;
		}
		.operBox{
			.fx(column);
			position: absolute;
			top: 0;
			left: 23%;
		}
		.edit,
		.detail,
		.delete{
			border: 0.005208rem solid #ddd;
			color:#ddd;
		}
	}
	.bootstrap-table table thead tr th:nth-of-type(6),
	.bootstrap-table table tbody tr td:nth-of-type(6),
	.bootstrap-table table thead tr th:nth-of-type(8),
	.bootstrap-table table tbody tr td:nth-of-type(8),
	.bootstrap-table table thead tr th:nth-of-type(7),
	.bootstrap-table table tbody tr td:nth-of-type(7)
	{
		width:6%;
	}
</style>